<template>
  <div class="page">
    <!-- <ad-component></ad-component> -->

    <ad6-html></ad6-html>

    <div class="page-content pt-24">
      <p class="page-title mb-12 p-0-16">{{ $t('welcome_title') }}</p>
      <HomeBanner
        v-if="dailyList && dailyList.length > 0"
        class="p-0-16 mb-64"
        :list="dailyList"
      />

      <div class="layout">
        <div class="left mr-24">
          <banner
            v-if="bannerList && bannerList.length > 0"
            :list="bannerList"
            class="mb-16"
          />

          <top-news
            v-if="topList && topList.length > 0"
            class="mb-48"
            :list="topList"
          />
          <channel-list :list="listData" />
        </div>
        <div class="right">
          <!-- <ad-component></ad-component> -->
          <topic-and-news
            :topic-list="hotTopicList"
            :news-list="latestNewsList"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ChannelList from '../components/ChannelList.vue';
import HomeBanner from '../components/HomeBanner.vue';
import TopicAndNews from '../components/TopicAndNews.vue';
import TopNews from '../components/TopNews.vue';
import Banner from '../components/Banner.vue';

import Ad6Html from '../components/Ad6Html.vue';
import AdComponent from './ad/ad-n-html.vue';

import { mergeSeoHead } from '@/seo/index';

export default {
  name: 'IndexPage',

  components: {
    HomeBanner,
    TopNews,
    ChannelList,
    TopicAndNews,
    Banner,
    AdComponent,
    Ad6Html
  },

  async asyncData({ $API }) {
    const [
      dailyBestRes,
      topRes,
      topicRes,
      latestNewsListRes,
      listDataRes,
      bannerListRes
    ] = await Promise.all([
      $API.articleGetSelectedNews(),
      $API.articleGetTopNews(),
      $API.subjectListHots(),
      $API.articleGetLastestNews(),
      $API.articleGetChannelListContent(),
      $API.articleGetBannerList({ sourceType: 16 })
    ]);

    return {
      dailyList: dailyBestRes,
      topList: topRes,
      hotTopicList: topicRes,
      latestNewsList: latestNewsListRes,
      listData: listDataRes,
      bannerList: bannerListRes
    };
  },
  mounted() {
    const that = this;
    this.randomNumber = new Date().getTime();
    setTimeout(() => {
      that.closeIframe();
    }, 4000);
  },
  methods: {
    adsInit() {},
    closeModal() {
      this.showModal = false;
    },
    closeIframe() {
      this.showIframe = false;
    },
    openLink(url) {
      window.open(url, '_blank');
    }
  },
  data() {
    return {
      dailyList: [], // 每日精选
      topList: [], // 置顶新闻
      hotTopicList: [], // 热门专题
      latestNewsList: [], // 最新资讯
      listData: [], // 频道模块
      bannerList: [],
      showModal: true,
      randomNumber: 0
      // showIframe: true
    };
  },

  // head() {
  //   const isZH = this.language === LANGUAGE.ZH;
  //   return {
  //     title: isZH
  //       ? '柬埔寨头条柬埔寨中柬媒体|柬埔寨商业动态|柬埔寨房产|柬埔寨新闻|柬埔寨生活攻略 - tnaot.com'
  //       : 'TNAOT APP Chinese and Cambodian bilingual media - tnaot.com',
  //     meta: [
  //       // hid is used as unique identifier. Do not use `vmid` for it as it will not work
  //       {
  //         hid: 'description',
  //         name: 'description',
  //         content: '《柬埔寨头条》中柬双语内容平台，承接全媒体投放，柬埔寨本土最活跃APP，及时提供柬埔寨的各类资讯、生活攻略、商业服务、政策解读，是柬埔寨最全内容平台'
  //       },
  //       {
  //         hid: 'keywords',
  //         name: 'keywords',
  //         content: '柬、柬埔寨、柬埔寨头条、柬埔寨地图、金边、中文媒体、柬文媒体、高棉生活、话费充值、'
  //       }
  //     ]
  //   };
  // },

  head() {
    const head = {
      title: this.$t('tnaot_title'),
      meta: [{ property: 'og:type', content: 'website' }]
    };
    return mergeSeoHead(
      head,
      this.$getMainSeoHead({
        title: this.$t('tnaot_title'),
        image: 'https://www.tnaot.com/img/logo-256.png',
        url: 'https://www.tnaot.com/' + this.locale + '/m',
        keyword: this.$t('indexKeywords'),
        description: this.$t('indexDescription')
      })
    );
  }
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .page-title {
    font-size: 28px;
    color: #0c0c1c;
    line-height: 48px;
    font-weight: 500;
  }
}

.layout {
  display: flex;

  .left {
    width: $page-left-width;
  }

  .right {
    width: $page-right-width;
  }
}

.tanchuang {
  position: absolute;
  height: auto;

  z-index: 99999;
  left: 50%;
  top: 180px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.close {
  text-align: right;
  cursor: pointer;
}
</style>
